<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <select id="province">
        <!-- <option value="">请选择</option> -->
        <!-- <option value=""></option> -->
    </select>
    <select id="city">
        <!-- <option value="">请选择</option> -->
        <!-- <option value=""></option> -->
    </select>
    <select id="area">
        <!-- <option value="">请选择</option> -->
        <!-- <option value=""></option> -->
    </select>

    <script>

        // 使用select标签的时候   option的value要么写  要么删   不能空着


        // var data = [
        //     '湖北',
        //     '湖南',
        //     '河南'
        // ]
        var data = [
            {
                sheng: '湖北',
                citys: [
                    {
                        city: '武汉',
                        qu: ['江夏', '洪山', '汉阳']
                    },
                    {
                        city: '孝感',
                        qu: ['孝昌', '安陆', '孝感3']
                    }
                ]
            },
            {
                sheng: '湖南',
                citys: [
                    {
                        city: '长沙',
                        qu: ['长沙1', '长沙2', '长沙3']
                    },
                    {
                        city: '岳阳',
                        qu: ['岳阳1', '岳阳2', '岳阳3']
                    }
                ]
            }
        ]

        var oPro = document.querySelector('#province');
        var oCity = document.querySelector('#city');
        var oArea = document.querySelector('#area');


        var cityArr = null;

        // 渲染省份
        var proHTML = '<option>请选择</option>';
        data.forEach(function (item) {
            proHTML += `<option>${item.sheng}</option>`;
        })
        oPro.innerHTML = proHTML;


        // 省份发生改变
        oPro.onchange = function () {
            // 获取值
            var pro = this.value;
            console.log(pro);
            // 找到满足条件的数据
            var arr = data.filter(function (item) {
                return item.sheng === pro
            });
            console.log(arr);
            // 拿到对应的市
            cityArr = arr[0].citys;
            console.log(cityArr);
            var cityHTML = '<option>请选择</option>';
            cityArr.forEach(function (item) {
                cityHTML += `<option>${item.city}</option>`;
            })
            oCity.innerHTML = cityHTML;

        }

        oCity.onchange = function () {
            var city = this.value;
            console.log(city);
            console.log(cityArr);

            var arr = cityArr.filter(function (item) {
                return item.city === city;
            })
            console.log(arr);

            var quArr = arr[0].qu;
            console.log(quArr);

            var quHTML = '<option>请选择</option>';
            quArr.forEach(function (item) {
                quHTML += `<option>${item}</option>`;
            })
            oArea.innerHTML = quHTML;
        }




    </script>

</body>

</html>